<template>
   <div>
        <Modal :closable="closable" ref="modal" v-model="modal2" width="950">
            <div slot="header" style="color:#f60;text-align:center;height:38px">
                <Row :gutter="7" type="flex">
                    <Col span="4">
                        <Select  v-model="buyMode" filterable :disabled="disabled">
                            <Option value="-9">全部 - 商品</Option>
                            <Option value="0">普通 - 商品</Option>
                            <Option value="5">新拼 - 商品</Option>
                            <Option value="1">秒杀 - 商品</Option>
                            <Option value="2">拼团 - 商品</Option>
                            <Option value="7">抽奖 - 商品</Option>
                        </Select>
                    </Col>
                    <Col span="20">
                        <Row :gutter="10">
                            <Col span="21">
                                <Input search @on-search="search" placeholder="请输入商品名或者商品编码" v-model="searchKeyword" />
                            </Col>
                            <Col span="3">
                                <Button type="primary" @click="search">查询</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
            <div style="text-align:center">
                <div class="goods-list-wrapper" ref="goodsList">
                    <Table :loading="loading" :height="table_h" :border="false" :columns="goodsList" :data="goodsData">
                        <div slot="header" class="table-header">
                            <Row type="flex" justify="space-between">
                                <strong>商品列表</strong>
                            </Row>
                        </div>
                        <div slot="footer">
                            <Row type="flex" justify="center" align="middle">
                                    <Page :total="goodsInfo.pageTotal * 10" @on-change="pageChange" show-elevator />
                                <!-- <Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col> -->
                            </Row>
                        </div>
                    </Table>
                </div>
            </div>
            <div slot="footer">
                <div>
                    <Row type="flex" v-show="goodsSelect.length" class="img-row">
                        <draggable class="drag" v-model="goodsSelect" :options="{animation: 150}">
                            <div class="goodsSelect-img" v-for="(item,index) in goodsSelect" :key="index">
                                <img :src="item.image_path" alt="" width="50" height="50">
                                <span @click="removeOne(index)" class="remove ivu-btn-primary">x</span>
                            </div>
                        </draggable>
                    </Row> 
                </div>
                
                <Row type="flex" justify="center">
                    <Button type="primary" @click="confirm()">确定</Button>
                </Row>
                <!-- <Page :total="100" show-elevator /> -->
            </div>
        </Modal>
   </div>
</template>

<script>
    // 商品列表的接口
    import {goodsCenter} from 'api/goodsCenter'
    import { handleBuyMode } from 'common/js/util'
    import {mapGetters} from 'vuex'
    import draggable from 'vuedraggable'
    export default {
        data(){
            return {
                // 商品列表的逻辑
                goodsData: [],
                loading: false,
                modal2: false,
                goodsList: [
                    {
                        title: '编号',
                        align: 'center',
                        key: 'goods_id',
                        width: 80,
                    },
                   {
                        title: '商品',
                        align: 'center',
                        width: 300,
                        render: (h, params) => {
                            return h('Row', { 
                                props: {
                                    type: 'flex',
                                    align: 'middle'
                                }
                             }, [
                                 h('Col', {
                                     span: 7
                                 }, [
                                     h('img',{
                                         attrs: {
                                             src: params.row.image_path,
                                             width: 120,
                                             height: 72
                                         },
                                         style: {
                                             margin: '10px 0'
                                         }
                                     })
                                 ]),
                                 h('Col', {
                                     props: {
                                         span: 13
                                     }
                                 }, [
                                     h('div', {
                                        attrs: {
                                            style: 'text-align: left;margin-left: 10px'
                                        }
                                     }, params.row.goods_title)
                                 ])
                             ])
                        }
                    },
                    {
                        title: '分类',
                        align: 'center',
                        width: 120,
                        render: (h, params) => {
                            let buyModeName = handleBuyMode(params.row.buy_mode)
                            return h('div',{}, buyModeName)
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        render: (h,params) => {
                            let arr = []
                            if(params.row.shelf_already){
                                arr.push(h('div', {}, `${params.row.shelf_already}`))
                            }
                            if(params.row.shelf_soon){
                                arr.push(h('div', {}, `${params.row.shelf_soon}`))
                            }
                            if(params.row.shelf_stay){
                                arr.push(h('div', {}, `${params.row.shelf_stay}`))
                            }
                            if(params.row.shelf_down){
                                arr = []
                                arr.push(h('div', {}, `${params.row.shelf_down}`))
                            }
                            return h('div', {}, arr)
                        }
                    },
                    {
                        title: '库存',
                        align: 'center',
                        render: (h, params) => {
                            let stronge = params.row.goods_style.map(style => h('div', {} , style.stock_storage))

                            return h('div', {}, stronge)
                        }
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            let selectIndex = this.goodsSelect.findIndex(item => item.goods_id == params.row.goods_id)
                            let str = selectIndex >= 0 ? '取消' : '选择'
                            return h('Row', {}, [
                                h('Button', {
                                    props: {
                                        type: selectIndex >= 0 ? 'default' : 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            let index = params.index
                                            if(selectIndex >= 0) {
                                                this.goodsSelect.splice(selectIndex, 1)
                                            } else {
                                                this.goodsSelect.push(this.goodsData[index])
                                                if(this.selectNum && this.goodsSelect.length > this.selectNum){
                                                    this.goodsSelect = this.goodsSelect.slice(1) 
                                                }
                                            }
                                            this.calTableHeight()
                                        }
                                    }
                                }, str)
                            ])
                        }
                    }
                ],
                goodsInfo: {
                    buyMode: '-9',
                    searchKeyword: '',
                    page: 1,
                    pageNum: 10,
                    pageTotal: 1,
                    isDistribution: -9,
                    isLadder: -9,
                    timeStatus: -9,
                    memberSupport: -9,
                    memberOnly: -9,
                },

                buyMode:' -9',
                searchKeyword: '',

                goodsSelect: [],
                modal: false,
                closable: false,
                
                table_h: '',
            }
        },
        props: {
            goodsIdStr: {
                type: String,
                default: ''
            },
            styleNum: {
                type: [String,Number],
                default: ''
            },
            setBuyMode: {
                type: [String, Number],
                default: '-9'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            selectNum: {
                type: [String, Number],
                default: 0
            },
            isDistribution: {
                type: [String, Number],
                default: -9
            },
            isLadder: {
                type: [String, Number],
                default: -9
            },
            timeStatus: {
                type: [String, Number],
                default: -9
            },
            memberSupport: {
                type: [String, Number],
                default: -9
            },
            memberOnly: {
                type: [String, Number],
                default: -9
            }
        },
        created(){
            this.resize = window.onresize
            // 商品列表
            // this.getGoodsList()
        },
        mounted() {
            this.$nextTick(() => {
                this.calTableHeight()
                // this.resize = () => {
                //     this.calTableHeight()
                // }
                // this.resize = window.onresize = () => {
                // }
            })
        },
        methods: {
            calTableHeight(){
                let h = this.goodsSelect.length ? 85 : 0
                let win_h = window.innerHeight
                this.table_h = win_h - 200 - h - 67 - 16 - 36
            },
            // 商品列表
            getGoodsList(){
                this.loading = true
                // goodsCenter().then(_data => console.log(_data))
                
                goodsCenter(this.goodsInfo).then(_data => {
                    this.loading = false
                    this.goodsData = _data.data.goodsData
                    this.goodsInfo.pageTotal = _data.data.lastPage
                    this.calTableHeight()
                })
            },
            pageChange(page){
                this.goodsInfo.page = page
                this.loading = true
                this.getGoodsList()
            },
            show(){
                this.modal2 = true
                this.loading = true
                setTimeout(() => {
                    this.goodsInfo.styleNum = this.styleNum
                    this.buyMode = this.setBuyMode.toString()
                    this.goodsInfo.buyMode = this.setBuyMode.toString()
                    this.goodsInfo.isDistribution = this.isDistribution
                    this.goodsInfo.isLadder = this.isLadder
                    this.goodsInfo.timeStatus = this.timeStatus
                    this.goodsInfo.memberOnly = this.memberOnly
                    this.goodsInfo.memberSupport = this.memberSupport
                    this.getGoodsList()
                    if(!this.goodsIdStr){ this.loading = false; this.goodsSelect = []; return; }
                    goodsCenter({page: 1, pageNum: 50, goodsIdList: this.goodsIdStr}).then(goods => {
                         this.goodsSelect = goods.data.goodsData
                         this.loading = false
                         setTimeout(() => {
                            this.calTableHeight()
                         }, 50)
                    })
                }, 200)
            },
            close(){
                this.modal2 = false
            },
            confirm(noClose){
                let arr  = this.goodsSelect.length ? this.goodsSelect.map(item => item.goods_id) : []
                this.$emit('confirm', arr.length ? arr.join(',') : '', this.goodsSelect)
                if(!noClose) {
                    this.close()
                }
            },
            removeOne(index){
                this.goodsSelect.splice(index, 1)
                this.calTableHeight()
            },
            search(goodsId){
                this.goodsInfo.buyMode = this.buyMode;
                if(goodsId.length>=1){
                    this.goodsInfo.searchKeyword = goodsId;
                    this.searchKeyword=goodsId;
                }else{
                    this.goodsInfo.searchKeyword=this.searchKeyword;
                }
                this.goodsInfo.page = 1
                this.getGoodsList()
            },
        },
        components: {
            draggable
        },
        watch: {
           
        }
    }
</script>

<style scoped lang="less">
    .goods-list-wrapper {
    }
    .goodsSelect-img{
        width: 50px;
        height: 50px;
        margin-right: 8px;
        border: 1px solid #e7e7e7;
        position: relative;
        cursor:move;
        .remove {
            display: block;
            position: absolute;
            top: 0;
            right: -2px;
            width: 15px;
            height: 15px;
            text-align: center;
            line-height: 1.1;
            cursor: pointer;
        }
    }
    .img-row{
        margin-bottom: 10px;
        padding-bottom: 10px;
        overflow-x: scroll
    }
    .table-header{
        padding: 0 24px;
    }
    .drag{
        display: flex
    }
</style>